<template>

    <div class="show-pc">
        <!-- 加载状态 -->
        <a-spin :spinning="loading" size="large" class="loading-spinner" />
        <div v-show="!loading">
            <div class="Pinned">
                <div class="content">
                    <div class="rightbox" @click="handleTodetails">
                        <div v-for="(item, index) in sizedImgList" :key="item.id" @mouseenter="handleHover(index)"
                            style="position: relative;" class="image-item">
                            <sshbImage :width="item.width" :height="item.height" :src="swiperImages[item.imgurl]"
                                class="cross-img" />
                            <div class="rightTopUp" :class="{ 'active-top': item.isActive }">
                                置顶
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <ImageCard />
            </div>
        </div>
    </div>
    <!-- 移动端 -->
    <div class="show-wap">
        <!-- 加载状态 -->
        <a-spin :spinning="loading" size="large" class="loading-spinner" />
        <div v-show="!loading">
            <div class="Pinned-wap">
                <div class="content-wap">

                    <div class="rightbox-container-wap">
                        <div class="rightbox-wap">
                            <div v-for="item in imgList" class="slide-item-wap" @click="handleTodetails">
                                <sshbImage :width="1400" :height="800" :src="swiperImages[item.imgurl]"
                                    style="border-radius: 10px;">
                                </sshbImage>
                                <div class="rightTopUp-wap">
                                    置顶
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <ImageCard />
            </div>
        </div>
    </div>





</template>

<script setup>
import { ref, computed } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import 'swiper/swiper-bundle.css'
import 'swiper/css'
import 'swiper/css/autoplay'
import ImageCard from './ImageCard.vue'
import sshbImage from '@/sshbComponents/sshbImage/index.vue';

import imgurl_1 from "../../assets/images/local_img/Swiper_1.jpg"
import imgurl_2 from "../../assets/images/local_img/swiper_2.jpg"
import imgurl_3 from "../../assets/images/local_img/swiper_3.jpg"
import imgurl_4 from "../../assets/images/local_img/swiper_4.jpg"
const router = useRouter();

// 注册 Autoplay 模块
const modules = [Autoplay]

const swiperImages = ({
    1: imgurl_1,
    2: imgurl_2,
    3: imgurl_3,
    4: imgurl_4,
})
const imgList = ref([
    {
        id: 0,
        imgurl: 1

    },
    {
        id: 1,
        imgurl: 2
        ,
    },
    {
        id: 2,
        imgurl: 3

    },
    {
        id: 2,
        imgurl: 4
    }
])



// 尺寸配置
const IMAGE_SIZE = {
    LARGE: 892,
    SMALL: 292,
    HEIGHT: 490
}

const activeIndex = ref(0)

// 计算属性生成带尺寸的数据
const sizedImgList = computed(() => {
    return imgList.value.map((item, index) => ({
        ...item,
        width: index === activeIndex.value ? IMAGE_SIZE.LARGE : IMAGE_SIZE.SMALL,
        height: IMAGE_SIZE.HEIGHT,
        // 控制置顶显示隐藏
        isActive: index === activeIndex.value
    }))
})


const handleHover = (index) => {

    activeIndex.value = index
}


const handleTodetails = ({ index }) => {
    router.push(`/details/${1}`)

}

// 加载状态控制
const loading = ref(true)

// 模拟数据加载
onMounted(() => {
    setTimeout(() => {
        loading.value = false
    }, 1000) // 1.5秒后关闭加载状态
})




</script>

<style lang="less" scoped>
.Pinned {
    width: 95.83333333333334vw;
    margin: 0 auto;
    margin-top: 2.08vw;




    .content {
        display: flex;
        justify-content: space-between;
           

        .rightbox {
            flex: 1;
            display: flex;
            gap: 1.19vw;
            overflow: hidden;

            .image-item {
                position: relative;
                flex-shrink: 0;
                cursor: pointer;
                transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);

                &:hover .rightTopUp {
                    background: rgba(214, 0, 14, 0.8);
                }

                .cross-img {
                    width: 100%;
                    height: 100%;
                    border-radius: 0.52vw;
                    object-fit: cover;
                    display: block;
                }

                .rightTopUp {
                    width: 3.64vw;
                    height: 2.08vw;
                    text-align: center;
                    line-height: 2.08vw;
                    position: absolute;
                    top: 0;
                    right: 0;
                    background: rgba(0, 0, 0, 0.7);
                    border-radius: 0.2vw 0.52vw 0.2vw 0.41vw;
                    font-size: 0.93vw;
                    color: #fff;
                    z-index: 2;



                }

                .rightTopUp {
                    /* 原有样式 */
                    background: rgba(0, 0, 0, 0.7);
                }

                .rightTopUp.active-top,
                .image-item:hover .rightTopUp {
                    background: rgba(214, 0, 14, 0.8);
                }
            }


        }








    }


}

.Pinned-wap {
    width: 95%;
    margin: 0 auto;

    .content-wap {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        gap: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; // iOS 平滑滚动

        /* 全平台隐藏滚动条方案 */
        scrollbar-width: none; // Firefox
        -ms-overflow-style: none; // IE/Edge

        &::-webkit-scrollbar {
            display: none; // Chrome/Safari/新版Edge
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }

        /* iOS 16+ 专项处理 */
        @supports (-webkit-touch-callout: none) {
            overflow: -moz-scrollbars-none; // 旧版Firefox备用
            // mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent); // 边缘渐变隐藏
        }

        .rightbox-container-wap {
            .rightbox-wap {
                display: flex;
                gap: 10px;
                white-space: nowrap;
                padding-bottom: 1px;


                .slide-item-wap {
                    position: relative;

                    .rightTopUp-wap {
                        width: 50px;
                        height: 30px;
                        text-align: center;
                        line-height: 30px;
                        position: absolute;
                        top: 0;
                        right: 0;
                        background: rgba(0, 0, 0, 0.7);
                        border-radius: 4px 8px 4px 4px;
                        font-size: 14px;
                        color: #fff;
                        z-index: 2;
                    }

                }
            }
        }
    }

}
</style>
